<template>
  <view class="scroll-container">
    <!-- 新增：跳转到di4的按钮。 -->
    <navigator url="/pages/index/shou_ye/di4" class="nav-button">
      成长足迹>>
    </navigator>

    <!-- 新增：第一块区域上方的背景图片 -->
    <view class="top-background"></view>

    <!-- 第一块区域：雷达图 -->
    <view class="section section-1">
      <text class="section-title">毕业能力展示图</text>
      <!-- 图表容器（标题下方） -->
      <view id="radar-chart" class="chart-container"></view>
    </view>

    <!-- 第二块区域 -->
    <view class="section section-2">
      <text class="section-title">图书借阅</text>
      <!-- 内容容器：图片 + 文本 -->
      <view class="content-wrapper">
        <!-- 图片区域 -->
        <view class="content-placeholder tp6-image"></view>
        <!-- 新增文本区域 -->
        <text class="section-text">每个陌生字符都是通往新世界的密钥，每道语法
          规则皆为文明____接口当你编译语言，世界向你
          开放源代码</text>
      </view>
    </view>

    <!-- 第三块区域 -->
    <view class="section section-3">
      <text class="section-title">成就时光机</text>
      <!-- 预留内容区域 - 添加图片容器类 -->
      <view class="content-placeholder tp5-image"></view>
      <text class="section-text1">大学，是知识的殿堂、思想的熔炉，更是无数人梦想启航的地方。从百年学府的薪火相传到现代高校的创新突破，每一所大学都以独特的姿态，在人才培养、学术科研、社会服务与文化传承中书写着不朽的成就，成为推动社会进步的重要力量。
      </text>
    </view>
  </view>
</template>

<script>
// 引入ECharts（确保已通过npm安装或本地引入）
import * as echarts from 'echarts';

export default {
  onReady() {
    // 页面渲染完成后初始化图表
    this.initRadarChart();
  },
  methods: {
    initRadarChart() {
      // 获取图表容器
      const chartDom = document.getElementById('radar-chart');
      const myChart = echarts.init(chartDom);

      // 雷达图配置
      const option = {
        tooltip: {
          trigger: 'item'
        },
        radar: {
          // 雷达图指标
          indicator: [
            { name: '学术能力', max: 100 },
            { name: '实践能力', max: 100 },
            { name: '创新能力', max: 100 },
            { name: '团队协作', max: 100 },
            { name: '沟通能力', max: 100 },
            { name: '专业技能', max: 100 }
          ]
        },
        series: [
          {
            name: '能力评估',
            type: 'radar',
            data: [
              {
                value: [80, 70, 60, 90, 85, 75],
                name: '当前能力'
              }
            ]
          }
        ]
      };

      // 渲染图表
      myChart.setOption(option);
      // 监听窗口大小变化，自适应图表
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  }
};
</script>

<style scoped>
/* 页面基础样式 */
page {
  background-image: url('static/tp/tp3.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow-y: auto;
}

.scroll-container {
  padding: 20rpx;
}

/* 新增：导航按钮样式 */
.nav-button {
  width: 200rpx;
  height: 80rpx;
  background-color: #043cf3;
  color: white;
  text-align: center;
  line-height: 80rpx;
  border-radius: 40rpx;
  /* 修改：移除居中margin，添加绝对定位 */
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  font-size: 32rpx;
  text-decoration: none;
}

/* 新增：顶部背景图片样式 */
.top-background {
  width: 100%;
  height: 150rpx; /* 减小高度（原为200rpx） */
  background-image: url('static/tp/tp4.png');
  background-size: contain; /* 改为contain确保图片完整显示 */
  background-position: center;
  background-repeat: no-repeat; /* 防止图片重复 */
  border-radius: 15rpx;
  margin-bottom: 20rpx;
}

/* 通用区域样式：垂直排列，标题置顶 */
.section {
  width: 95%; /* 将宽度从100%调整为95% */
  margin: 0 auto; /* 居中显示 */
  border-radius: 15rpx;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 30rpx 20rpx;
}

/* 第一块区域：保持基础高度 */
.section-1 {
  background-color: #f5f5f8;
  height: 30vh; /* 基础高度 */

}

/* 第二块区域：增加高度（放长） */
.section-2 {
  background-color: #f5f5f8;
  height: 45vh; /* 高于第一块区域 */
}

/* 第三块区域：增加高度（放长） */
.section-3 {
  background-color: #f5f5f8;
  height: 50vh; /* 最高区域 */
}

/* 区域标题样式 */
.section-title {
  font-size: 40rpx;
  color: #f36704;
  font-weight: bold;
  text-shadow: 0 3rpx 6rpx rgba(0, 0, 0, 0.3);
  padding: 12rpx 30rpx;
  border-radius: 50rpx;
  background-color: rgba(244, 7, 7, 0.25);
  margin-bottom: 25rpx;
  letter-spacing: 2rpx;
}

/* 雷达图容器 */
.chart-container {
  width: 90%;
  height: calc(100% - 120rpx);
  background-color: rgba(241, 233, 192, 0.9);
  border-radius: 10rpx;
  padding: 20rpx;
}

/* 内容占位符 */
.content-placeholder {
  width: 90%;
  height: 200rpx; /* 调整图片高度，为文本留出空间 */
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 第二块区域内容容器：垂直排列图片和文本 */

.content-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
  flex-grow: 1; /* 新增：让内容容器占满剩余空间 */
}


/* 第三块区域图片样式 */

/* 第三块区域图片样式 */
.tp5-image {
  background-image: url('static/tp/tp5.png');
  background-size: 95% auto; /* 修改：使用百分比控制大小 */
  background-position: center;
  background-repeat: no-repeat;
  height: 350rpx; /* 新增：增加容器高度 */
}

/* 第二块区域图片样式 */
.tp6-image {
  background-image: url('static/tp/tp6.png');
  background-size: 95% auto; /* 修改：使用百分比控制大小 */
  background-position: center;
  background-repeat: no-repeat;
  height: 350rpx; /* 修改：增加容器高度（原为250rpx） */
}
/* 第二块区域文本样式 */
.section-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  text-align: center;
  padding: 20rpx;
  white-space: pre-line;
  background-color: #e6f7ff; /* 修正：改为淡蓝色背景 */
  border-radius: 10rpx;
  margin-top: auto;
}
.section-text1 {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  text-align: center;
  padding: 20rpx;
  white-space: pre-line;
  background-color: #e6f7ff; /* 修正：改为淡蓝色背景 */
  border-radius: 10rpx;
  margin-top: auto;
}



</style>